<template>
  <div id="app">
    <!-- 组件都在 router-view 渲染 -->
    <!-- include 值 组件名字，包含哪个组件名字，哪个组件被缓存 -->

    <keep-alive include="Category">
       <router-view :key="$route.params.id" />
    </keep-alive>

   <!--  <keep-alive>
      <router-view v-if="$route.meta.isKeepAlive" />
    </keep-alive>

    <router-view v-if="!$route.meta.isKeepAlive" /> -->
    <!-- 使用路由模式 -->
    <van-tabbar v-if="isShowTabbar" route active-color="#c4567b">
      <!-- to 就跳转的 组件路由 值就是路由里面配置的path值 -->
      <van-tabbar-item replace to="/home" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" icon="description"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      isShowTabbar:true
    }
  },
  created() {
    var userInfo = {
      // 练习时，写成自己的手机号
      openId: '66',

      nickName: '赵六',

      avatarUrl:
        'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132'
    }

    var openId = userInfo.openId

    localStorage.setItem('userInfo', JSON.stringify(userInfo))

    localStorage.setItem('openId', openId)
  },
  watch:{
    $route:function(to,from){
      // console.log('to=>',to);
      // console.log('from=>',from);
      const pathArr = ['/home','/topic','/category','/cart','/my']
      if(pathArr.includes(to.path)){ // 
          this.isShowTabbar = true
      }else{
          this.isShowTabbar = false
      }
    }
  }
}
</script>

<style lang="scss">
</style>
